<template>
  <div class="simulator-container">
    <div id="simulator-editor" class="simulator-editor">
      <div class="simulator-editor-content">
        <Draggable
          :value="curBlocks"
          class="list-group"
          :group="{ name: 'block', put: true }"
          @change="onChange"
        >
            <div 
                class="list-group-item"
                v-for="(block) in curBlocks"
                :data-label="block.label"
                :key="block.uuid"
                :class="{
                    focus: block.focus,
                    focusWithChild: block.focusWithChild,
                    ['has-slot']: !!Object.keys(block.props.slots || {}).length
                }"
                @contextmenu.stop.prevent="onContextmenuBlock($event, block)"
                @mousedown="onFocus(block)"
            >
              <Block
                :element="block"
               >
                  <!-- <BlockSlot
                    v-model="block.props.slots.default.children"
                    :slot-key="'default'"
                    :on-contextmenu-block="onContextmenuBlock"
                    :select-comp="onFocus"
                  /> -->
                   <!-- <template
                    v-for="(value, slotKey) in (block.props.slots || [])"
                    #[slotKey]
                >
                </template> -->
                  <!-- <div>{{9999}}</div> -->
                <template
                    v-for="(value, slotKey) in (block.props.slots || [])"
                    #[slotKey]
                >
                  <BlockSlot
                    :key="slotKey"
                    v-model="value.children"
                    :slot-key="slotKey"
                    :on-contextmenu-block="onContextmenuBlock"
                    :select-comp="onFocus"
                  />
                </template>
               </Block>
            </div>
        </Draggable>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Draggable from "vuedraggable";
import Block from "./components/Block";
import BlockSlot from './components/BlockSlot'

export default {
  name: "SimulatorEditor",
  components: {
    Draggable,
    Block,
    BlockSlot,
  },
  data() {
    return {
    };
  },
  computed: {
    ...mapState("editor", ["curPage", "curBlocks"]),
  },
  methods: {
    ...mapMutations('editor', ['setBlock', 'setBlockFocus']),
    onChange(e) {
        // 左侧拖进来
        if (e.added) {
            const {
                newIndex,
                element,
            } = e.added
            this.setBlock({ block: element, type: 'add', newIndex, });
            console.log(element, e)
            return;
        } 
        // 中间移动 block排序
        if (e.moved) {
            const {
                newIndex,
                oldIndex,
                element,
            } = e.moved;
            this.setBlock({ block: element, type: 'move', newIndex, oldIndex});
        }
    },
    onFocus(block) {
        this.setBlockFocus(block.uuid)
    },
    onContextmenuBlock() {

    }
  },
  mounted() {
      console.log('xxx')
  }
};
</script>
<style lang="scss" scoped>
@import './mixins.scss';

.simulator-editor-content {
  height: 100%;
}
.container-row{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 2px;
}
.list-group {
  height: 100%;
  width: 100%;
  &.isDrag:not(.no-child) :deep(.list-group-item.has-slot) {
    @include showContainerBorder;
  }
}

.simulator-container {
  display: flex;
//   width: 100%;
  height: 100%;
  padding-right: 380px;
  align-items: center;
  justify-content: center;

  @media (max-width: 1114px) {
    padding-right: 0;
  }
}

.simulator-editor {
  width: 660px;
  height: 740px;
  height: 330px;
  min-width: 660px;
  padding: 60px 150px 0;
  overflow: hidden auto;
  background: #fafafa;
  border-radius: 5px;
  box-sizing: border-box;
  background-clip: content-box;
  contain: layout;

  &::-webkit-scrollbar {
    width: 0;
  }

  &-content {
    min-height: 100%;
    transform: translate(0);
    box-shadow: 0 8px 12px #ebedf0;
  }
}

.list-group-item {
  position: relative;
  padding: 3px;
  cursor: move;

  > div {
    position: relative;
  }

  &.focus {
    @include showComponentBorder;
  }

  &.drag::after {
    display: none;
  }

  &:not(.has-slot) {
    content: '';
  }

  &.focusWithChild {
    @include showContainerBorder;
  }

  i {
    cursor: pointer;
  }
}
</style>
